<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理系统 - 管理员注册</title>
    <link rel="stylesheet" href="<c:url value="/static/css/layui.css"/>">
    <link rel="icon" href="<c:url value="/favicon.ico"/>" type="image/x-icon"/>
    <script src="<c:url value="/static/layui.js"/>"></script>
    <script src="<c:url value="/static/sha256.js"/>"></script>
</head>

<c:if test="${empty sessionScope.login}" var="needLogin">
    <body>
    <script>
        layui.use('layer', function () {
            layer.msg("只允许管理员进行注册操作，请先登录...");
            setTimeout(function () {
                location.href = "<c:url value="/login.jsp"/>";
            }, 1000);
        });
    </script>
    </body>
</c:if>

<c:if test="${not pageScope.needLogin}">
    <body style="padding: 50px 0; background-color: #f2f2f2">
    <!-- 页面内容 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-md-offset4">
            <div class="layui-card">
                <div class="layui-card-header" style="height: 72px">
                    <h1 style="line-height: 72px; height: 72px; text-align: center">管理员注册</h1>
                </div>

                <div class="layui-card-body">
                    <form id="register-form" class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">账户</label>
                            <div class="layui-input-block">
                                <!-- 用户名输入框 -->
                                <div class="layui-select-title">
                                    <input type="text" name="name" id="name" lay-verify="required|name"
                                           placeholder="请输入账户名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-block">
                                <!-- 密码输入框 -->
                                <input type="password" id="pass" lay-verify="required|pass"
                                       placeholder="请输入密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">密码确认</label>
                            <div class="layui-input-block">
                                <!-- 密码确认框 -->
                                <input type="password" id="confirm" lay-verify="required|confirm"
                                       placeholder="请确认密码" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item layui-layer-btn-c">
                            <!-- 提交按钮 -->
                            <button type="submit" lay-submit lay-filter="register" class="layui-btn">注册</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面逻辑 -->
    <script>
        // 引入 LayUI
        layui.use(['form', 'layer', 'jquery'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;

            // AJAX 防抖
            function debounce(time, handler) {
                var debounce = null;
                return function (e) {
                    clearTimeout(debounce);
                    debounce = setTimeout(function () {
                        handler(e);
                    }, time);
                }
            }

            // 表单内容验证
            form.verify({
                name: function (value) {
                    if (!/\w{1,32}/u.test(value)) {
                        return "用户名必须是 1-32 位字符或数字！";
                    }
                },
                pass: function (value) {
                    if (!/^[\w!"#$%&'()*+,\-./:;<=>?@\[\\\]^_‘{|}~]{2,32}$/.test(value)) {
                        return "密码必须是 2-32 位英文字符、数字或符号！";
                    }
                },
                confirm: function (value) {
                    if ($("#pass").val() !== value) {
                        return "两次密码输入不一致！";
                    }
                }
            });

            // 设置用户名存在性检查
            $('#name').blur(debounce(200, function () {
                $.ajax({
                    url: '<c:url value="/api/admin/exists"/>',
                    type: 'post',
                    dataType: 'json',
                    data: {name: $('#name').val()},
                    success: function (result) {
                        if (result && result.code === 0) {
                            if (result.exists) {
                                layer.tips("账户已注册！", "#name");
                            }
                        }
                    }
                })
            }));

            // 注册
            form.on('submit(register)', function () {
                $.ajax({
                    url: "<c:url value="/api/admin/register"/>",
                    type: "post",
                    data: {
                        name: $('#name').val().trim(),
                        crypt: sha256('crypt[' + $('#pass').val().trim() + ']')
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result && result.code === 0) {
                            layer.msg('注册成功，正在跳转至登录界面...');
                            setTimeout(function () {
                                location.href = "<c:url value="/login.jsp"/>";
                            }, 1000);
                        } else {
                            layer.msg('注册失败' + (result && result.msg ? ": " + result.msg : "") + "！");
                        }
                    }
                })
                return false;
            });
        });
    </script>
    </body>
</c:if>
</html>
